<template>
  <div id="app">
    <header class="head">
      <a class="back tl" @click="routerBack">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">餐饮服务日常监督检查要点表</small>
      </a>
      <a href="javascript:;" class="tr">
        <small class="font_18 co_f"></small>
      </a>
    </header>
    <main>
    
      <table class="dailytable">
        <tr>
          <th colspan="1">本年度检查次数</th>
          <td colspan="3">{{ this.checkcontent.checkNumber}}</td>
        </tr>
        <tr>
          <th colspan="1">总检查项目数</th>
          <td colspan="3">{{ this.checkcontent.totalItem}}</td>
        </tr>
        <tr>
          <td colspan="4">
            重点项（{{this.checkcontent.stressItem}}）项，项目序号分别是（{{this.checkcontent.stressPItem}}）
            <br>
            发现问题（{{this.checkcontent.noStressItem}}）项，项目序号分别是（）
          </td>
        </tr>
        <tr>
          <td colspan="4">
            一般项（{{this.checkcontent.normalItem}}）序号（{{this.checkcontent.commonPItem}}）
              <br>
            发现问题（{{this.checkcontent.noNormalItem}}）序号（{{this.checkcontent.noItemSerial}}）</td>
        </tr>
        
      </table>
      <p class="tip">提示：带<span>*</span>号的为重要项</p>
      <div class="box-card" v-for="item in this.CheckResult">
        <div class="clearfix box-card-header">
          <span>{{item.checkBig.name}}</span>
        </div>
        <ul>
          <li v-for="(o,index) in item.checkSmall" :key="o">
            {{o.sort}}、{{o.lause}}<em v-if="o.importance==1" :class="o.importance?'importance':'unimportance'">*</em>
            <p v-if="o.note!=null">{{o.note}}</p>
            <p class="note"><span>判定结果:{{state[o.checkResult]}}</span> </p>
          </li>
        </ul>
  
  
      </div>
  
  
  
  
    </main>
  </div>
</template>

<script>
  import AppUpload from '@/components/upload'
  import {
    GetCheck,
    FindCheckResultNew
  } from '../../../api/api';
  export default {
    data() {
      return {
        selected: 'tab-container1',
        data: "",
        ScoreData: [],
        CheckResult: [],
        checkcontent:this.$route.query.checkcontent,
        state: {
          "1": "符合",
          "2": "不符合",
          "3": "合理缺项",
        }
      };
    },
    methods: {
      routerBack() {
        this.$router.go(-1);
      },
      Result() {
        let options = {
          params: {
            id: this.$route.query.checkunid,
          }
        }
        //调取接口
        FindCheckResultNew(options).then((res) => {
          if (res.success === true) {
            this.CheckResult = res.data;
          }
        })
      },
    },
    //页面加载时候
    mounted() {
      this.Result();
    }
  }
</script>

<style lang="scss" scoped>
  /*tab*/
  
  .mint-navbar {
    background: #efefef;
    padding: 0% 20%;
  }
  
  .mint-navbar .mint-tab-item.is-selected {
    background: #feaa50;
    color: #fff;
    border-bottom: none;
    margin-bottom: auto;
  }
  
  .mint-tab-item {
    border: 1px solid #feaa50 !important;
    padding: 10px !important;
    margin: 6px 0px
  }
  
  .mtrademark-list-info a {
    padding: 10px 10px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #ccc;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center
  }
  
  .mtrademark-list-right {
    float: left;
    line-height: normal;
    margin-left: 10px;
  }
  
  .mtrademark-list-right p:first-child {
    margin-bottom: 5px;
    font-size: 16px;
    color: #000
  }
  
  .mtrademark-list-right p {
    font-size: 12px;
    color: #43464f;
    display: block;
    margin: 0;
  }
  
  .mtrademark-list-right span {
    display: block;
    margin-top: 6px;
  }
  
  #mtrademark-list-right-status {
    display: table;
    margin: 10px 0;
    border: 1px solid #5BC67C;
    color: #5BC67C;
    float: left;
    padding: 2px;
    border-radius: 2px;
  }
  
  .dailytable {
    width: 98%;
    margin: 10px auto;
    border-collapse: collapse;
    th {
      background: #f5f7fa;
      color: #878d99
    }
    td {
      padding: 8px 0px 8px 2px !important;
    }
  }
  
  .dailytable td,
  .dailytable th {
    border: 1px solid #e6ebf5;
    padding: 8px 0px;
    width: 25%;
  }
  
  .box-card {
    width: 100%;
    border-top: .5rem solid #efefef;
    .box-card-header {
      border-bottom: 1px solid #e4e4e4;
      overflow: hidden;
      color: #333333;
      padding: 10px;
      font-size: .85rem;
    }
    ul {
      padding-left: 10px;
      font-size: 12px;
      li {
        padding: 5px 0px;
        color: #6a6a6a;
        .importance {
          color: red;
          font-weight: bold;
        }
        p {
          text-align: right;
          padding-right: 10px;
          overflow: hidden;
          color: #666666;
          span {
            margin-left: 5px;
          }
        }
      }
    }
  }
  .tip{ padding-left:10px; span{ margin: 0px 5px; color:red} }
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->

